<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>练习 - 网页时钟</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(270deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(0deg);
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="hh" id="h"></div>
      <div class="mm" id="m"></div>
      <div class="ss" id="s"></div>
    </div>
    <script>
      let ss = document.querySelector('.ss')
      let du = 0
      setInterval(() => {
        du += 6
        if (du >= 360) {
          du = 0
        }
        ss.style.transform = `rotate(${du}deg)`
      }, 100)
    </script>
  </body>
</html>
